<template>
  <div class="container">
    <div class="column left">
      <el-button type="primary" @click="simulateSuccess"
        >模拟请求成功</el-button
      >
      <br />
      <br />
      <el-button type="danger" @click="simulateError">模拟请求失败</el-button>
    </div>
    <div class="column middle">
      <pre>
        /**
          * 模拟 wx.request 的请求方法
          * @param {Object} options - 请求配置选项
          * @param {string} options.url - 请求的目标 URL
          * @param {Object} options.data - 请求数据（将作为 JSON 发送）
          * @param {Function} [options.success] - 请求成功时的回调函数
          * @param {Function} [options.fail] - 请求失败时的回调函数
          */
        callRequest(options) {
          const { url, data, success, fail } = options;

          fetch(url, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(data),
          })
            .then((response) => response.json())
            .then((res) => {
              if (success) success(res);
            })
            .catch((err) => {
              if (fail) fail(err);
            });
        }
      </pre>
    </div>
    <div class="column right">
      <div v-if="apiStatus === 'idle'">等待请求...</div>
      <div v-else-if="apiStatus === 'loading'">请求中...</div>
      <div v-else-if="apiStatus === 'success'">
        <h3>请求成功</h3>
        <pre>{{ JSON.stringify(apiResponse, null, 2) }}</pre>
      </div>
      <div v-else-if="apiStatus === 'error'">
        <h3>请求失败</h3>
        <pre>{{ JSON.stringify(apiError, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ResponsiveLayout",
  data() {
    return {
      apiStatus: "idle", // 状态：idle, loading, success, error
      apiResponse: null,
      apiError: null,
    };
  },
  methods: {
    /**
     * 模拟 wx.request 的请求方法
     * @param {Object} options - 请求配置选项
     * @param {string} options.url - 请求的目标 URL
     * @param {Object} options.data - 请求数据（将作为 JSON 发送）
     * @param {Function} [options.success] - 请求成功时的回调函数
     * @param {Function} [options.fail] - 请求失败时的回调函数
     */
    callRequest(options) {
      const { url, data, success, fail, method } = options;
      const config = {
        method: method || "GET",
        headers: {
          "Content-Type": "application/json",
        },
      };

      if (method?.toUpperCase() !== "GET" && method?.toUpperCase() !== "HEAD") {
        config.body = JSON.stringify(data);
      }

      fetch(url, config)
        .then((response) => response.json())
        .then((res) => {
          if (success) success(res);
        })
        .catch((err) => {
          if (fail) fail(err);
        });
    },
    // 模拟成功请求（调用真实接口）
    simulateSuccess() {
      this.apiStatus = "loading";
      this.callRequest({
        method: "GET",
        url: "https://589868.xyz/ai_cube/api/chat/test",
        data: {
          userId: 1,
          title: "foo",
          body: "bar",
        },
        success: (res) => {
          this.apiStatus = "success";
          this.apiResponse = res;
        },
        fail: (err) => {
          this.apiStatus = "error";
          this.apiError = err;
        },
      });
    },

    // 模拟失败请求（触发网络错误或服务器错误）
    simulateError() {
      this.apiStatus = "loading";
      this.callRequest({
        method: "GET",
        url: "https://httpstat.us/500", // 返回 500 错误
        data: {},
        success: (res) => {
          this.apiStatus = "success";
          this.apiResponse = res;
        },
        fail: (err) => {
          this.apiStatus = "error";
          this.apiError = err;
        },
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  overflow: hidden;
}

.column {
  box-sizing: border-box;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: left;
  overflow-y: auto;
}

/* 桌面端：三列 */
@media (min-width: 992px) {
  .column.left {
    width: 240px;
  }

  .column.middle {
    flex: 1;
  }

  .column.right {
    width: 300px;
  }
}

/* 平板端：两列 */
@media (min-width: 768px) and (max-width: 991px) {
  .column.left {
    width: 200px;
  }

  .column.middle {
    flex: 1;
  }

  .column.right {
    flex: 0 0 100%;
  }
}

/* 手机端：单列 */
@media (max-width: 767px) {
  .column {
    flex: 0 0 100%;
  }
}
</style>
